<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">个人信息</block>
		</cu-custom>
		<view class="padding">
			<view class="box padding-lg bg-white radius-xl">
				<view class="item crow margin-bottom-xl justify-center flex-direction" @tap="chooseImage">
					<image class="avatarUrl" :src="form.headimg" mode=""></image>
				</view>
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">昵称</view>
					<view class="right">
						<input type="text" class="text-right" placeholder="请输入昵称" v-model="form.nickname">
					</view>
				</view>
				<view class="item crow margin-bottom-xl" @tap="genderShow = true;">
					<view class="left text-left">性别</view>
					<view class="right text-right" v-if="form.gender"> {{ form.gender_text }} </view>
					<view class="right text-right" v-else> 请选择性别</view>
					<text class="cuIcon-right"></text>
				</view>
				<view class="item crow margin-bottom-xl" @tap="birthdayShow = true;">
					<view class="left text-left">生日</view>
					<view class="right text-right" v-if="form.birthday"> {{ form.birthday }} </view>
					<view class="right text-right" v-else> 选择您的生日</view>
					<text class="cuIcon-right"></text>
				</view>
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">绑定手机号</view>
					<view class="right text-right"> {{ USERINFO.mobile }} </view>
					<view class="text-right margin-left-sm text-green" @tap="$utils.$page.open('/pages/user/account/bind')">
						修改 </view>
				</view>
				<view class="item crow margin-bottom-xl">
					<view class="left text-left">最后登录</view>
					<view class="right text-right"> {{ USERINFO.last_login_time }} </view>
				</view>
			</view>

			<view class="padding margin-top-lg" v-if="isEdit">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round" @click="submit()">保存</button>
				</view>
			</view>
		</view>
		<loading v-if="pageLoading" />
		<u-picker :show="genderShow" keyName="name"
			:columns="[[{ name: '男', value: 'man' }, { name: '女', value: 'woman' }]]" confirmColor="var(--theme-color)"
			@cancel="genderShow = false;" @confirm="genderConfirm">
		</u-picker>
		<u-datetime-picker ref="datetimePicker" :show="birthdayShow" :maxDate="maxDate" :minDate="minDate" mode="date"
			:formatter="formatter" @confirm="confirmBirthday" @cancel="birthdayShow = false;"></u-datetime-picker>
	</view>
</template>

<script>
import { mapState } from 'vuex'
const date = new Date();
date.setFullYear(date.getFullYear() - 16);
const maxDate = date.getTime();
date.setFullYear(date.getFullYear() - 44);
const minDate = date.getTime();
export default {
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO
		})
	},
	data() {
		return {
			genderShow: false,
			birthdayShow: false,
			pageLoading: false,
			maxDate,
			minDate,
			form: {
				headimg: '',
				nickname: '',
				birthday: '',
				gender: '',
				gender_text: '',
			},
			isLoad: false,
			isEdit: false
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				if (this.isLoad) {
					this.isEdit = true
				}
			},
			deep: true
		}
	},
	onLoad() {
		this.form.headimg = this.USERINFO.headimg
		this.form.nickname = this.USERINFO.nickname
		this.form.birthday = this.USERINFO.birthday
		this.form.gender = this.USERINFO.gender
		this.form.gender_text = this.USERINFO.gender_text
		// #ifdef MP-WEIXIN
		this.$refs.datetimePicker.setFormatter(this.formatter)
		// #endif
		this.$nextTick(() => {
			this.isLoad = true
		})
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		submit() {
			uni.showLoading({ title: '保存中...' });
			this.$utils.$api.User.save(this.form).then(res => {
				uni.hideLoading();
				this.$utils.$message.success(res.msg);
				setTimeout(() => {
					this.$utils.$page.back();
				}, 1000);
			}).catch(err => {
				uni.hideLoading();
				this.$utils.$message.error(err.msg);
			})
		},
		chooseImage() {
			this.$utils.$api.Upload.chooseImage()
				.then(res => {
					this.form.headimg = res.data.url
				}).catch(err => {
					this.$utils.$message.error(err.msg);
				})
		},
		genderConfirm(e) {
			this.form.gender = e.value[0].value;
			this.form.gender_text = e.value[0].name;
			this.genderShow = false;
		},
		confirmBirthday(e) {
			const d = new Date(e.value);
			this.form.birthday = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
			this.birthdayShow = false;
		}
	}
}
</script>

<style lang="less" scoped>
.box {
	.item {
		width: 100%;

		.left {
			width: 25%;
		}

		.right {
			flex: 1;

			input {
				font-size: 26upx;
			}
		}

		.locationfill {
			font-size: 35upx;
		}
	}
}

.avatarUrl {
	border-radius: 50%;
	width: 140upx;
	height: 140upx;
	border: solid 1upx #F8F8F8;
	background-color: #F8F8F8;
}
</style>
